<!-- 模板语法 -->
<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      模板语法
    </div>
    <div id="templateVue">
      <div>{{ msgString }}</div>
      <a-divider />
      <div>
        <p>Using text interpolation: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      </div>
      <a-divider />
      <div v-bind:id="divId" class="divClass">看我绑的ID</div>
      <div :id="divId" class="divClass">直接绑定属性</div>
      <a-divider />
      <a-input v-model:value="inputValue" usage></a-input>
      <a-divider />
      <a-button
        type="primary"
        :disabled="!isButtonDisabled"
        @click="clickCount++"
        >我能点{{ clickCount == 0 ? "" : clickCount }}</a-button
      >
      <a-button type="primary" :disabled="isButtonDisabled">我不能点</a-button>
      <a-divider />
      <a-input v-bind="inputStyle"></a-input>
      <a-divider />
      点一下按钮试试
      {{ clickCount + 1 }}
      <a-divider />
      这里是正则
      {{ true ? "YES" : "NO" }}
      <a-divider />
      {{ "Banana Orange Apple Mango".split("").reverse().join("") }}
      <a-divider />
      <div :id="`list-${divId}`"></div>
      <a-divider />
      <div>{{ reverseString("Banana Orange Apple Mango") }}</div>
      <a-divider />
      <div v-if="clickCount % 2 == 0">你能看见我嘛？</div>
      <a-divider />
      <a v-bind:href="url"> 点我就跳走喽 </a>
      <!-- 简写 -->
      <a :href="url"> 点我就跳走喽 </a>
      <a-divider />
      <a v-on:click="doSomething"> 执行方法 </a>
      <!-- 简写 -->
      <a @click="doSomething"> 执行方法</a>
      <a-divider />
      <!--
      注意，参数表达式有一些约束，
      参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
      属性名不支持大写
    -->
      <a v-bind:[attributeName]="url" @click="updateAttributeName">
        修改绑定的属性
      </a>
      <!-- 简写 -->
      <a :[attributeName]="url" @click="updateAttributeName">
        修改绑定的属性
      </a>
      <a-divider />
      <a v-on:[eventName]="doSomething"> 动态的事件名称 </a>
      <!-- 简写 -->
      <a @[eventName]="doSomething">动态的事件名称 </a>
      <a-divider />
      <!-- 这会触发一个编译器警告，如果需要传入一个复杂的动态参数，推荐使用计算属性替换复杂的表达式 -->
      <!-- <a :['foo' + bar]="value"> ... </a> -->
      <a-divider />
      <!-- prevent：阻止默认事件，如复选框的选中，表单的提交，href 的跳转 -->
      <form @submit.prevent="onSubmit">
        <a href="https://www.bing.com" @click.prevent="doSomething">
          阻止a标签的默认时间</a
        >
        <a-button type="primary" html-type="submit">Submit</a-button>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msgString: "字符串模板语法",
      rawHtml: "<h1>这是html</h1>",
      divId: "123456",
      inputValue: "这是文本框的值,这是有边框的",
      isButtonDisabled: true,
      clickCount: 0,
      inputStyle: {
        bordered: false,
        placeholder: "inputStyle绑定的内容，我是个文本内框，这是无边框的",
      },
      dataList: [1, 2, 3, 45, 6, 7, 8, 9],
      url: "https://www.bing.com",
      attributeName: "attributeName",
      eventName: "click",
    };
  },
  methods: {
    reverseString(string) {
      return string.split("").reverse().join(",");
    },
    doSomething() {
      alert("execute");
    },
    updateAttributeName() {
      this.attributeName =
        this.attributeName === "attributeName" ? "likeHref" : "attributeName";
    },
    onSubmit() {
      alert("execute");
    },
  },
};
</script>
<style scoped type="text/css">
/** 
样式穿透要根据 style 中的type 选择合适的标识 
css 使用 >>>
less 使用 /deep/
scss 使用 ::v-deep
 */
#templateVue >>> .ant-divider-horizontal {
  margin: 8px;
}
.divClass {
  border: 1px solid red;
  height: 20px;
  margin-bottom: 8px;
}
</style>
